<template>
	<div>
		
		<div class="searchForm">
			<div>
				品牌名称
			</div>
			<div >
				
				<selectBrand ref="selectBrand" @getBrandName="getBrandName" />
			</div>
			<div>
			    系列名称：
			</div>
			<div>
				<selectSerial ref="selectSerial" @getClassName="getClassName" />
			</div>
			<div>
			    型号名称： 
			</div>
			<div>
				<selectModel ref="selectModel" @getModelName="getModelName" />
			</div>
		    <div>
		        <el-button type="primary" size="mini" @click="search">检索</el-button>
		        <el-button size="mini" @click="clearSearch">重置/检索</el-button>
				<el-button type="primary" size="mini" @click="addModel">新增型号和商品</el-button>
		    </div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    prop="model_name"    label="型号名称"></el-table-column>
			<el-table-column   align="center"    prop="class_name"    label="系列名称"></el-table-column>
			<el-table-column   align="center"    prop="brand_name"    label="品牌名称"></el-table-column>
			
			 <el-table-column width="100"  align="center"   label="状态">
			 	<template slot-scope="scope">
			 	   <div>
			 			<el-switch
			 			  @change="sortStatusList(scope.row)"	
			 			  v-model="scope.row.status"
			 			 :inactive-value="'0'"
			 			 :active-value="'1'"
			 			 >
			 			</el-switch>
			 	   </div>
			 	</template>
			 </el-table-column>
			  <el-table-column  label="排序(数字大的在前边)" width="200"  align="center">
			       <template slot-scope="scope">
			          <div>
						  <el-input @blur="sortStatusList(scope.row)" size="mini" v-model="scope.row.sort"
						  type="number" style="width: 80px;"></el-input>
			  		</div>
			       </template>
			   </el-table-column>
			   <el-table-column   align="center" prop="model_remark"    label="型号说明"></el-table-column>
		<!-- 	<el-table-column   align="center"    prop="add_time"    label="添加时间"></el-table-column>
			<el-table-column   align="center"    prop="update_time"    label="修改时间"></el-table-column>
			 -->
		   <el-table-column  label="操作"   align="center">
		        <template slot-scope="scope">
		            <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
					<el-button type="text" @click="lodeMemopryData(scope.row)">修改内存排序</el-button>
					<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
				</template>
		    </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" label-width="80px">
				  <div class="flex flex_b">
					  <el-form-item label="品牌名称" >
							<!-- <el-input size="small"
							  disabled
							  v-if="form.id"
							  v-model="form.brand_name"
							></el-input> -->
					  		<selectBrand 
							ref="selectBrand1" 
							@getBrandName="getBrandName1" />
					  </el-form-item>
					  <el-form-item label="系列名称">
						  <!-- <el-input size="small"
							disabled
							v-if="form.id"
							v-model="form.class_name"
						  ></el-input> -->
					  	   <selectSerial  
							ref="selectSerial1" 
							@getClassName="getClassName1" />
					  </el-form-item>
					  <el-form-item label="型号名称">
							 <el-input size="small" 
								v-model="form.model_name"
							 ></el-input>
					  </el-form-item>
				  </div>
				  <div class="flex flex_b">
					  <el-form-item label="排序" >
						  <el-input size="small"
							type="number"
							v-model="form.sort"
						  ></el-input>
					  </el-form-item>
					  <el-form-item label="型号说明" >
						<el-input type="textarea" size="small" v-model="form.model_remark"
						></el-input>
					  </el-form-item>
					  <el-form-item label="串号长度" >
						  <el-input size="small"
							type="number"
							v-model="form.number_length"
						  ></el-input>
					  </el-form-item>
				  </div>
				  <div class="flex" 
						v-if="!form.id"
						v-for="(el,i) in addGoodsData" :key="i">
					  <el-form-item label="内存">
							<div  >
								<el-input size="small"
									@input="changeWeight(el,i)"
									style="width: 100px;"
									v-model="el.goods_weight"
								></el-input>
							</div>
					  </el-form-item>
					  <el-form-item label="排序">
							<div >
								<el-input size="small"
									type="number"
									style="width: 80px;"
									v-model="el.sort"
								></el-input>
							</div>
					  </el-form-item>
					  <el-form-item label="名称">
							<div >
								<el-input size="small"
									style="width: 200px;"
									v-model="el.goods_outher_name"
								></el-input>
							</div>
					  </el-form-item>
					  <el-form-item label="颜色">
						   <div >
							  <el-input size="small" v-model="el.goods_color_str"
								style="width: 200px;"
								placeholder="多个颜色用空格隔开"
							  ></el-input>
							  <i style="font-size: 25px;cursor: pointer;position: relative;top: 5px;left: 5px;" 
									@click="addGoodsItem"
									class="el-icon-circle-plus-outline"></i>
							  <i style="font-size: 25px;cursor: pointer;position: relative;top: 5px;left: 10px;"
									@click="removeGoodsItem(i)"
									class="el-icon-remove-outline"></i>
						   </div>
					  </el-form-item>
				  </div>
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		<el-dialog
		        title="修改内存排序"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="800px"
		>
		  <div>
			  <el-form   ref="form" label-width="80px">
				  <div class="flex">
					  <el-form-item label="型号名称">
							<el-input style="width: 300px;" disabled type="text" size="small" 
							v-model="memopryData.model_name"
							></el-input>
					  </el-form-item>
					  <el-form-item label="品牌">
						<el-input style="width: 300px;" disabled type="text" size="small" 
						v-model="memopryData.brand_name"
						></el-input>
					  </el-form-item>
					  
				  </div>
				  
				  <div class="flex">
					  <el-form-item label="系列">
						<el-input style="width: 300px;" disabled type="text" size="small" 
						v-model="memopryData.class_name"
						></el-input>
					  </el-form-item>
					  <!-- el-form-item label="型号说明">
						<el-input style="width: 300px;" disabled type="text" size="small" v-model="form.model_remark"
						></el-input>
					  </el-form-item> -->
				  </div>
				  <div class="flex" >
					  <el-form-item label="内存">
							<div style="width: 300px;" v-for="(el,i) in memoryArr" :key="i">
								{{el.memory}}
								<!-- {{el.sort}} -->
									<!-- @blur="changeSort(el)" -->
								<input type="text" v-model="el.sort" 
									style="width: 30px;float: right;margin-top: 5px;margin-left: 5px;">
								<!-- <i @click="memorySort(el,i,1)" class="el-icon-top iconStyle"></i>
								<i @click="memorySort(el,i,2)" class="el-icon-bottom iconStyle"></i> -->
							</div>
					  </el-form-item>
					  <el-form-item label="颜色">
						   <div style="width: 300px;" v-for="(el,i) in memoryArr" :key="i">
						   	 <span v-for="(item,ind) in el.goods_color" :key="ind">
							  {{item}}
							 </span>
						   </div>
					  </el-form-item>
				  </div>
				  <el-form-item label="">
					   <el-button type="primary" size="mini" @click="confirmSort">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	import selectModel from '@/components/selectModel.vue'
	import selectSerial from '@/components/selectSerial.vue'
	import selectBrand from '@/components/selectBrand.vue'
	export default {
		data(){
			return {
				title:"",
				page:1,
				pageSize:10,
				form:{
					id:null,
					model_remark:'',
					model_name:"",
					brand_name:"",
					class_name:'',
					old_model_name:"",
					old_brand_name:"",
					old_class_name:'',
					sort:1,
					number_length:1
				},
				search_form:{
					model_name:"",
					brand_name:"",
					class_name:'',
				},
				addTitle:'新增',
				isShow:false,
				table_name:'hs_model',
				memopryData:{
					model_name:"",
					brand_name:"",
					class_name:'',
				},
				memoryArr:[], //内存数据
				addGoodsData:[
					{
						goods_weight:'',
						goods_color_str:'',
						sort:1,
						goods_outher_name:""
					}
				]
			}
		},
		components:{
			selectModel,
			selectSerial,
			selectBrand
		},
		mounted() {
			this.lodeList()
		},
		methods:{
			changeWeight(el,i){
				this.addGoodsData[i].goods_outher_name = `${this.form.brand_name} ${this.form.model_name} ${el.goods_weight}`
			},
			removeGoodsItem(i){
				if(this.addGoodsData.length==1) return this.$message.error('只剩一个不能删除')
				this.addGoodsData.splice(i,1)
			},
			addGoodsItem(){
				this.addGoodsData.push({
					goods_weight:'',
					goods_color_str:'',
					sort:1,
					goods_outher_name:""
				})
			},
			addModel(){
				this.form = {
					id:null,
					model_remark:'',
					model_name:"",
					brand_name:"",
					class_name:'',
					old_model_name:"",
					old_brand_name:"",
					old_class_name:'',
					sort:1,
					number_length:1
				}
				
				this.addTitle = '新增'
				this.formShow = true
				setTimeout(()=>{
					this.$refs.selectBrand1.brand_name = ''
					this.$refs.selectSerial1.class_name = ''
				},100)
			},
			
			getModelName(val){
				this.search_form.model_name = val
			},
			getClassName(val){
				this.search_form.class_name = val
				this.form.class_name = val
				this.$refs.selectModel.lodeModel(val)
			},
			getClassName1(val){
				this.form.class_name = val
			},
			getBrandName(val){
				this.search_form.brand_name = val
				this.form.brand_name = val
				this.$refs.selectSerial.lodeClass(val)
			},
			getBrandName1(val){
				this.form.brand_name = val
				this.$refs.selectSerial1.lodeClass(val)
			},
			confirmSort(){
				let param = {
					memoryArr:this.memoryArr
				}
				this.$post('/prodectSys/memorySortOne',param,res=>{
					this.lodeMemopryData(this.memopryData)
				})
				
			},
			memorySort(el,ind,type){
				// type 1 上 2 下
				let len = this.memoryArr.length - 1
				if(ind==0 && type==1) return this.$message.error('已经在最上边了')
				if(ind==len && type==2) return this.$message.error('已经在最下边了')
				
				let sort
				let sort1
				let params
				if(type==1){ // 1上
					sort =  this.memoryArr[ind].sort
					sort1 = this.memoryArr[ind-1].sort
					params = {
						sort:sort,
						sort1:sort1,
						model_name1:this.memoryArr[ind].model_name,
						brand_name1:this.memoryArr[ind].brand_name,
						class_name1:this.memoryArr[ind].class_name,
						memory1:this.memoryArr[ind].memory,
						model_name:this.memoryArr[ind-1].model_name,
						brand_name:this.memoryArr[ind-1].brand_name,
						class_name:this.memoryArr[ind-1].class_name, 
						memory:this.memoryArr[ind-1].memory,
					}
				}else{
					sort =  this.memoryArr[ind].sort
					sort1 = this.memoryArr[ind+1].sort
					
					params = {
						sort:sort,
						sort1:sort1,
						model_name1:this.memoryArr[ind].model_name,
						brand_name1:this.memoryArr[ind].brand_name,
						class_name1:this.memoryArr[ind].class_name,
						memory1:this.memoryArr[ind].memory,
						model_name:this.memoryArr[ind+1].model_name,
						brand_name:this.memoryArr[ind+1].brand_name,
						class_name:this.memoryArr[ind+1].class_name,
						memory:this.memoryArr[ind+1].memory,
					}
					
				}
				
				
				this.$post('/prodectSys/memorySort',params,res=>{
					this.lodeMemopryData(this.memopryData)
				})
				
			},
			memorySort1(el,ind,type){
				// type 1 上 2 下
				let len = this.memoryArr.length - 1
				if(ind==0 && type==1) return this.$message.error('已经在最上边了')
				if(ind==len && type==2) return this.$message.error('已经在最下边了')
				 let sort
				 let sort1
				 let subtract
				 let nextMemory
				 if(type==1){ // 1上
					sort =  this.memoryArr[ind].sort
					sort1 = this.memoryArr[ind-1].sort
					subtract = sort1 - sort
					if(sort == sort1){
						sort++
					}else{
						sort+=subtract
						sort++
					}
					nextMemory = this.memoryArr[ind-1].memory
				 }else{  // 2下
					 sort =  this.memoryArr[ind].sort
					 sort1 = this.memoryArr[ind+1].sort
					 console.log(sort,sort1)
					 subtract = sort - sort1
					 if(sort == sort1){
					 	sort--
					 }else{
					 	sort-=subtract
					 	sort--
					 }
					 nextMemory = this.memoryArr[ind+1].memory
				 }
				 let params = {
					 model_name:el.model_name,
					 brand_name:el.brand_name,
					 class_name:el.class_name,
					 sort:sort,
					 sort1:sort1,
					 memory:this.memoryArr[ind].memory,
					 nextMemory:nextMemory
				 }
				 this.$post('/prodectSys/memorySort',params,res=>{
					 this.lodeMemopryData(this.memopryData)
				 })
				 
			},
			//获取内存数据
			lodeMemopryData(row){
				this.memopryData.model_name = row.model_name
				this.memopryData.brand_name = row.brand_name
				this.memopryData.class_name = row.class_name
				this.isShow = true
				let params = {
					model_name:row.model_name,
					brand_name:row.brand_name,
					class_name:row.class_name
				}
				this.$post('/prodectSys/lodeMemopryData',params,res=>{
					let result = res.data.data
					let memoryArr = []
					if(result){
						
						result.forEach((item,i)=>{
							let obj = {
								sort:item.sort==0?i+1:item.sort,
								memory:item.goods_weight,
								model_name:item.goods_type,
								class_name:item.cate,
								brand_name:item.brand,
								goods_color:[]
							}
							let ind = memoryArr.findIndex((ele)=>{
								return ele.memory == item.goods_weight
							})
							if(ind==-1){
								memoryArr.push(obj)
							}
						})
						
						for(let item of result){
							for(let ele of memoryArr){
								if(item.goods_weight == ele.memory){
									ele.goods_color.push(item.goods_color)
								}
							}
						}
						memoryArr.sort((a,b)=>{
							return b.sort - a.sort
						})
						this.memoryArr = memoryArr
					}
				})
			},
			delRow(id){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							let params = {
								table_name:this.table_name,
								ids:[id]
							}
				          this.$post('/prodectSys/delProdect',params,res=>{
							  this.lodeList()
						  })
				        })
			},
			sortStatusList(row){
				
				let params = {
					id:row.id,
					sort:row.sort,
					status:row.status,
					brand:row.brand_name,
					cate:row.class_name,
					goods_type:row.model_name
				}
				this.$post('/prodectSys/updateModelStatus',params,res=>{
					this.$message.success('操作成功')
					this.lodeList()
				})
			},
			editRow(row){
				this.addTitle = '编辑'
				for(let i in this.form){
					this.form[i] = row[i]
				}
				console.log(row,333333)
				this.form.old_brand_name = row.brand_name
				this.form.old_class_name = row.class_name
				this.form.old_model_name = row.model_name
				
				setTimeout(()=>{
					this.$refs.selectBrand1.brand_name = row.brand_name
					this.$refs.selectSerial1.class_name = row.class_name
					this.$refs.selectSerial1.lodeClass(row.brand_name)
				},100)
				
				this.formShow = true
			},
			clearSearch(){
				this.title = ''
				this.page = 1
				this.search_form={
					class_name:'',
					brand_name:"",
					model_name:''
				}
				this.$refs.selectBrand.brand_name = ''
				this.$refs.selectModel.model_name = ''
				this.$refs.selectSerial.class_name = ''
				
				this.search()
			},
			confirm(){
				if(this.form.id){
					this.$post('/prodectSys/editModel',this.form,res=>{
						if(res.data.code==200){
							this.$message.success('操作成功')
							this.formShow = false
							this.lodeList()
						}
					})
				}else{
					this.addGoods()
				}
			},
			addGoods(){
				let goodsInfo = []
				for(let item of this.addGoodsData){
					item.goods_color_arr = item.goods_color_str.split(' ')
					for(let ele of item.goods_color_arr){
						let obj = {
							brand:this.form.brand_name,
							cate:this.form.class_name,
							cid:sessionStorage.getItem('cid'),
							goods_color:ele,
							goods_name:`${this.form.brand_name} ${this.form.model_name} ${item.goods_weight} ${ele}`,
							goods_outher_name:item.goods_outher_name,
							goods_type:this.form.model_name,
							goods_weight:item.goods_weight,
							sort:item.sort,
							number_length:this.form.number_length,
							is_price:1
						}
						goodsInfo.push(obj)
					}
				}
				let params = {
					model_info:this.form,
					goods_info:goodsInfo
				}
			    
				this.$post('/prodectSys/addGoodsModel',params,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.lodeList()
					}
				})
			},
			lodeList(){
				let params = {
					page:this.page,
					pageSize:this.pageSize,
					table_name:this.table_name,
					...this.search_form
				}
				this.$post('/prodectSys/getBrandList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
	.iconStyle{
		float: right;margin-top: 10px;cursor: pointer;
	}
</style>